<template>
  <view class="nav">
    <view class="nav-list" @click="active0">
      <image class="icon" src="/static/Meet/new.png" />
      <text class="text">最新</text>
    </view>

    <view class="nav-list" @click="active1">
      <image class="icon" src="/static/Meet/hot.png" />
      <text class="text">热门</text>
    </view>

    <navigator class="nav-list" url="/pages/index/meet/components/publish" open-type="navigate">
      <image class="icon" src="/static/Meet/send.png" />
      <text class="text">发布</text>
    </navigator>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, defineProps } from 'vue'
let { reverse } = defineProps(['reverse'])
// 切换最新或最热
const active = ref(0)

const active0 = () => {
  reverse()
  uni.$emit('active0', '0')
  // 切换最新或最热
  const active = ref(0)
  uni.$emit('active0', '0')
}

const active1 = () => {
  uni.$emit('active1', '1')
}
</script>

<style scoped>
.nav {
  padding: 10px 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border: 1px solid #f1ebeb;
  border-radius: 15px 15px;
  box-shadow: 2rpx 5rpx 10rpx -2rpx #dbdbdb;
  box-sizing: border-box;
  margin-top: 15rpx;
}

.nav-list {
  width: 150rpx;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-left: 12px;
}

.icon {
  width: 100rpx;
  height: 100rpx;
}

.text {
  font-size: 30rpx;
  color: #000;
  height: 30rpx;
  line-height: 30rpx;
  margin-top: 6px;
}
</style>
